<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <h1>Hello, {{name}}</h1>
    </div>
  </body>

  <script type="text/javascript">
    const v = new Vue({
      //多行注释  shift + alt + a

      el: "#root",
      //第一种写法：对象式，创建时指定数据
      /* data: {
            name: "尚硅谷123",
          } */

      //第二种写法：函数式，由VUE帮我们调用
      data:function() {
        console.log("函数式内部对象" + this);
        //需要Return 返回实例
        return {
          name: "尚硅谷123",
        };
      },
      //可简写为 data(){}
      data() {
        console.log("函数式内部对象" + this);
        //需要Return 返回实例
        return {
          name: "尚硅谷123",
        };
      },
      //另外，如果使用ES6的箭头函数 ()=>{}，没有this，会找到顶层windows
    });
  </script>

</html>
